<template>
    <div class="app-container">
         <!-- class="filters"  label-width="75px"-->
        <el-form class="searchForm" :inline="true" size="mini" ref="searchForm" :model="searchForm">
            <el-form-item label="日志日期">
                <el-date-picker style="width: 140px" v-model="searchForm.startDate" :append-to-body="false" :popper-append-to-body="false" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                    placeholder="请选择日志日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="日志时间" class="log_times">
                <el-time-picker style="width: 200px" is-range v-model="rangeTimes" range-separator="至" start-placeholder="开始时间"
                    end-placeholder="结束时间" placeholder="请选择日志时间" format="HH:mm:ss" value-format="HH:mm:ss">
                </el-time-picker>
            </el-form-item>
            <el-form-item label="操作人">
                <el-input v-model="searchForm.operBy" placeholder="请输入操作人" clearable></el-input>
            </el-form-item>
            <el-form-item label="标题">
                <el-input v-model="searchForm.title" placeholder="请输入标题" clearable></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="searchForm.statusCode" placeholder="请选择状态" clearable>
                    <el-option v-for="item in enumsJson.LOG_STATUS" :key="item.code" :label="item.label" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="业务类型">
                <el-select v-model="searchForm.businessTypeCodes" multiple placeholder="请选择业务类型" clearable>
                    <el-option v-for="item in enumsJson.SYS_BUSINESS_TYPE" :key="item.code" :label="item.label"
                        :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>
            
            <el-form-item>
                <el-button class="search_btn" type="primary" size="mini" icon="el-icon-search"
                    @click="doSearch">搜索</el-button>
                <el-button type="default" size="mini" icon="el-icon-refresh" @click="resetSearch">重置</el-button>
                <!-- <el-button type="text" @click="doAdvanced">{{ advanced ? "收起" : "展开"
                }}<i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></el-button> -->
            </el-form-item>
        </el-form>

        <Table :tableHeader="tableHeader" :tableData="tableData" :tableLoading="listLoading">
            <template slot="action" slot-scope="scope">
                <el-button type="primary" size="mini" plain @click="addDialog(scope.row)">详情</el-button>
            </template>
        </Table>
        <pagination v-if="total > 0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
            :pageSizes="[16, 32, 40, 80, 100]" @pagination="fetchData" />

        <!-- 弹框 -->
        <Dialog :visible="visible" width="55%" title="详情信息" :isFooter="false" @cancelDialog="cancelDialog">
            <el-descriptions :column="2" class="des-details">
                <el-descriptions-item label="标题">{{
                    currentRow.title
                }}</el-descriptions-item>
                <el-descriptions-item label="业务类型">{{
                    currentRow.businessTypeLabel
                }}</el-descriptions-item>

                <el-descriptions-item label="状态">{{
                    currentRow.statusLabel
                }}</el-descriptions-item>
                <el-descriptions-item label="请求方式">{{
                    currentRow.requestMethod
                }}</el-descriptions-item>
                <el-descriptions-item label="消耗时间(ms)">{{
                    currentRow.costTime
                }}</el-descriptions-item>
                <el-descriptions-item label="方法">{{
                    currentRow.method
                }}</el-descriptions-item>
                <el-descriptions-item label="错误消息">{{
                    currentRow.errorMsg
                }}</el-descriptions-item>

                <el-descriptions-item label="主机IP">{{
                    currentRow.operIp
                }}</el-descriptions-item>
                <el-descriptions-item label="请求URL">{{
                    currentRow.operUrl
                }}</el-descriptions-item>
                <el-descriptions-item label="操作人">{{
                    currentRow.operBy
                }}</el-descriptions-item>
                <el-descriptions-item label="描述">{{
                    currentRow.desc
                }}</el-descriptions-item>
                <el-descriptions-item label="操作时间">{{
                    currentRow.operTime
                }}</el-descriptions-item>
            </el-descriptions>

            <el-row>
                <el-col :span="11">
                    <div class="label-cont">请求参数:</div>
                    <vue-json-editor style="height: 100%" v-model="currentRow.requestParam" :showBtns="false" mode="text" />
                </el-col>
                <el-col :span="11" :offset="1" class="jsonContent">
                    <div class="label-cont">返回参数:</div>
                    <vue-json-editor style="height: 100%" v-model="currentRow.resultParam" :showBtns="false" mode="text" />
                </el-col>
            </el-row>
        </Dialog>
    </div>
</template>
  
<script>
import { operates } from "@/api/system";

import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import Table from "@/components/Table";
import Dialog from "@/components/Dialog";

import { removeNullUndefined } from "@/utils/index.js";
import moment from "moment";
import { mapState } from "vuex";
import vueJsonEditor from "vue-json-editor";

export default {
    components: { Pagination, Table, Dialog, vueJsonEditor },
    data() {
        return {
            listLoading: true,
            total: 0,
            searchForm: {
                pageNum: 1,
                pageSize: 16,
                startDate: moment(new Date()).format("YYYY-MM-DD"),
                beginTime: "",
                endTime: "",
                operBy: "",
                title: "",
                businessTypeCodes: [],
                statusCode: "",
            },

            rangeTimes: ["00:00:00", "23:59:59"],

            tableHeader: [
                {
                    type: "index",
                    label: "序号",
                    width: "60",
                    fixed: true,
                },
                {
                    label: "标题",
                    prop: "title",
                    width: "32"
                },
                {
                    label: "业务类型",
                    prop: "businessTypeLabel",
                    width: "25"
                },
                {
                    label: "状态",
                    prop: "statusLabel",
                    width: "20"
                },
                {
                    label: "错误消息",
                    prop: "errorMsg",
                    width: "50"
                },
                {
                    label: "消耗时间(ms)",
                    prop: "costTime",
                    width: "40"
                },
                {
                    label: "主机IP",
                    prop: "operIp",
                    width: "42"
                },
                {
                    label: "请求URL",
                    prop: "operUrl",
                },
                {
                    label: "操作人",
                    prop: "operBy",
                    width: "30"
                },
                {
                    label: "操作时间",
                    prop: "operTime",
                    width: "50"
                },
                { slot: "action", label: "操作", width: "90" },
            ],
            tableData: [],
            visible: false, //弹框标识

            currentRow: {},
            advanced: false,
        };
    },
    computed: {
        ...mapState({
            enumsJson: (state) => state.enums.enums,
        }),
    },
    created() {
        this.fetchData();
    },
    methods: {
        formatterTime(val) {
            return val ? moment(Number(val)).format("YYYY-MM-DD HH:mm:ss") : "";
        },
        fetchData(val) {
            if (!this.searchForm.startDate) {
                this.$message.warning("请选择日志时间");
                return;
            }
            if (!this.rangeTimes) {
                this.$message.warning("请选择日志日期");
                return;
            }
            this.searchForm.pageNum = val ? val.page : this.searchForm.pageNum;
            this.searchForm.beginTime = this.rangeTimes[0];
            this.searchForm.endTime = this.rangeTimes[1];
            this.listLoading = true;
            this.tableData = [];
            this.total = 0;
            operates(
                "/oper/log/list",
                "post",
                { ...removeNullUndefined(this.searchForm) },
                1
            )
                .then((res) => {
                    this.tableData = res.data;
                    this.total = +res.total;
                })
                .finally(() => {
                    this.listLoading = false;
                });
        },

        // 弹框取消
        cancelDialog() {
            this.visible = false;
            this.currentRow = {};
        },

        // 新增
        async addDialog(row) {
            this.visible = true;
            this.currentRow = { ...row };
            this.currentRow.requestParam = row.requestParam ? JSON.parse(row.requestParam) : {};
            this.currentRow.resultParam = row.resultParam ? JSON.parse(row.resultParam) : {};
        },

        resetSearch() {
            this.searchForm = {
                pageNum: this.searchForm.pageNum,
                pageSize: this.searchForm.pageSize,
                startDate: moment(new Date()).format("YYYY-MM-DD"),
                beginTime: "",
                endTime: "",
                operBy: "",
                title: "",
                businessTypeCodes: [],
                statusCode: "",
            };
            this.rangeTimes = ["00:00:00", "23:59:59"];
        },
        doSearch() {
            this.searchForm.pageNum = 1;
            this.fetchData();
        },
        // 展开折叠
        doAdvanced() {
            this.advanced = !this.advanced;
        },
    },
};
</script>
<style lang="scss" scoped>
@import "@/styles/common.scss";
.searchForm {
    padding-left: 8px;
    .el-form-item {
        margin-bottom: 8px;
    }
}
.search_btn {
    margin-left: 20px;
}

.filters {
    justify-content: space-between;
    align-items: flex-end;

    .el-form-item {
        width: auto;
    }
}

.condition {
    @include flexLayout(center, flex-start);
    flex-wrap: wrap;
}

::v-deep .el-date-editor .el-range-separator,
::v-deep .el-date-editor .el-range__icon {
    // line-height: 25px;
}

::v-deep .el-descriptions-item__content {
    color: #000000;
    font-size: 16px;
}

.des-details {
    margin-left: 20px;
}

::v-deep .el-descriptions-item__label {
    width: 95px;
    justify-content: flex-end;
}

.label-cont {
    width: 110px;
    text-align: right;
    margin-bottom: 10px;
}

.el-icon-arrow-up {
    color: #409eff;
}

::v-deep .jsoneditor-vue {
    margin-left: 4%;
}

::v-deep .jsoneditor-vue {
    height: 400px;
}
</style>
  